<template>
  <a-layout-header class="header">
    <div class="logo" />
    <a-menu
        v-model:selectedKeys="selectedKeys1"
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
    >
      <a-menu-item key="home">
        <router-link to="/">首页</router-link>
      </a-menu-item>
      <a-menu-item key="adminEbook" v-if="user.id">
        <router-link to="/adminEbook">电子书管理</router-link>
      </a-menu-item>
      <a-menu-item key="adminCategory" v-if="user.id">
        <router-link to="/adminCategory">分类管理</router-link>
      </a-menu-item>
      <a-menu-item key="adminUser" v-if="user.id">
        <router-link to="/adminUser">用户管理</router-link>
      </a-menu-item>
      <a-menu-item key="about">
        <router-link to="/about">关于我们</router-link>
      </a-menu-item>
      <a-menu-item key="login" style="margin-left: auto">
        <a @click="showLoginModel" v-show="!user.id">登录</a>
        <span v-show="user.id">你好：{{user.name}}</span>
      </a-menu-item>
      <a-menu-item key="logout" v-if="user.id">
        <a @click="logout">退出登录</a>
      </a-menu-item>
    </a-menu>
  </a-layout-header>

  <a-modal
      v-model:visible="loginVisible"
      title="Title"
      :confirm-loading="loginConfirmLoading"
      @ok="loginHandleOk"
  >

    <!--      <p>表单</p>-->
    <a-form :model="loginUser" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-item label="用户名">
        <a-input v-model:value="loginUser.loginName"/>
      </a-form-item>
      <a-form-item label="密码">
        <a-input v-model:value="loginUser.password" />
      </a-form-item>

    </a-form>

  </a-modal>

</template>

<script>
import {computed, ref} from "vue"
import axios from "axios";
import {message} from "ant-design-vue";
import store from "@/store"
import router from "@/router";
import {useRouter} from "vue-router";

export default {
  name: "Header",
  setup(){
    const selectedKeys = ref(['home']);

    // 登录
    const user = computed(()=> store.state.user)
    const loginUser = ref({})
    const loginVisible = ref(false);
    const loginConfirmLoading = ref(false);
    const showLoginModel = () => {
      loginVisible.value = true;
    }
    const loginHandleOk = () => {
      loginConfirmLoading.value = true;
      axios.post("api/login",loginUser.value).then(res=>{
        loginConfirmLoading.value = false;
        loginVisible.value = false;
        if (res.data.code === "200"){
          // 成功登录
          // user.value = res.data.date;
          // vuex
          store.commit("setUser", res.data.date)
          message.success(res.data.msg);
        } else {
          message.error(res.data.msg);
        }
      })
    }
    const router = useRouter()
    const logout = () => {
      axios.get("api/logout/" + user.token).then(res=>{
        if (res.data.code === "200") {
          store.commit("setUser", {})
          message.success(res.data.msg);
          router.push("/")
        } else {
          message.error(res.data.msg);
        }
      })
    }


    return{
      selectedKeys,

      // 登录
      labelCol: { style: { width: '150px' } },
      wrapperCol: { span: 14 },
      user,
      loginUser,
      loginVisible,
      showLoginModel,
      loginConfirmLoading,
      loginHandleOk,
      logout,
    }
  }
}
</script>

<style scoped>

</style>